<template>
  <div id="userList">

    <div class="gva-table-box">
      <div class="gva-btn-list">
        <!--        <el-button size="small" type="primary" icon="plus" @click="addAuthority(0)">新增用户</el-button>-->
      </div>

      <el-table
        :data="tableData"
      >
        <el-table-column align="left" label="头像" min-width="75">
          <template #default="scope">
            <CustomPic :pic-src="scope.row.headerImg" style="margin-top: 8px" />
          </template>
        </el-table-column>
        <el-table-column label="用户ID" min-width="100" prop="ID" />
        <el-table-column label="用户名" min-width="100" prop="userName" />
        <el-table-column label="用户昵称" min-width="100" prop="nickName" />
        <el-table-column label="手机号" min-width="100" prop="phone" />
        <el-table-column label="邮箱" min-width="100" prop="email" />
        <el-table-column label="启用" min-width="100" prop="enable">
          <template #default="scope">
            <el-switch
              v-model="scope.row.enable"
              :active-value="1"
              :inactive-value="2"
              inline-prompt
              @change="()=>{switchEnable(scope.row)}"
            />
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" width="460">
          <template #default="scope">
            <el-button
              icon="setting"
              like
              size="small"
              type="primary"
              @click="opdendrawer(scope.row)"
            >查看
            </el-button>
            <el-button
              icon="setting"
              like
              size="small"
              type="primary"
              @click="opdendrawer(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>
</template>
<script setup>

import { nextTick, ref } from 'vue'
import { getUserList } from '@/api/userList'
import CustomPic from '@/components/customPic/index.vue'
import { setUserInfo } from '@/api/user'

const page = ref(1)
const total = ref(0)
const pageSize = ref(999)
const tableData = ref([])
const searchInfo = ref({})

const getTableData = async() => {
  const table = await getUserList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

const switchEnable = async(row) => {
  userInfo.value = JSON.parse(JSON.stringify(row))
  await nextTick()
  const req = {
    ...userInfo.value
  }
  const res = await setUserInfo(req)
  if (res.code === 200) {
    ElMessage({ type: 'success', message: `${req.enable === 2 ? '禁用' : '启用'}成功` })
    await getTableData()
    userInfo.value.headerImg = ''
    userInfo.value.authorityIds = []
  }
}

getTableData()

console.log(tableData)

</script>
